<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>考试列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 考试列表区域 -->
      <el-table :data="examineList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="考试id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="考试场次" prop="name" width="164px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="考试科目" prop="subject" width="100px"></el-table-column>
        <el-table-column label="总人数" prop="examNumber" width="90px">
          <template slot-scope="scope">
            {{ scope.row.examNumber }}人
          </template>
        </el-table-column>
        <el-table-column label="报名人数" prop="appointNumber" width="100px">
          <template slot-scope="scope">
            {{ scope.row.appointNumber }}人
          </template>
        </el-table-column>
        <el-table-column label="考试阶段" prop="stage" width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.stage==='报名结束'?'warning':scope.row.stage==='考试结束'?'info':''">
              {{ scope.row.stage }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="考试日期" prop="date" width="100px"></el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <!-- 评分按钮 -->
            <el-button type="primary" icon="el-icon-s-claim" size="mini"
                       :disabled="(scope.row.stage === '报名中' || scope.row.stage === '报名结束')"
                       @click="score(scope.row.id)">评分
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 评分的对话框 -->
    <el-dialog title="评分" :visible.sync="setScoreDialogVisible" width="60%">

      <!-- 考试学生列表区域 -->
      <el-table :data="examineStudentList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="学生id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="学生姓名" prop="name" width="100px"></el-table-column>
        <el-table-column label="考试次数" prop="count" width="100px">
          <template slot-scope="scope">
            {{ scope.row.count }}次
          </template>
        </el-table-column>
        <el-table-column label="成绩" prop="grade" width="90px"></el-table-column>
        <el-table-column label="成绩说明" prop="remark" width="130px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" width="210px">
          <template slot-scope="scope">
            <!-- 评分按钮 -->
            <el-button type="primary" icon="el-icon-s-claim" size="mini"
                       :disabled="(scope.row.grade !== null)"
                       @click="setScore(scope.row)">评分
            </el-button>
            <!-- 备注按钮 -->
            <el-button type="primary" icon="el-icon-s-claim" size="mini"
                       :disabled="(scope.row.grade === null)"
                       @click="setRemark(scope.row)">评分说明
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "ExamineManage",
  data() {
    return {
      subjectOptions: ['科目一', '科目二', '科目三', '科目四'],
      stageOptions: ['报名中', '报名结束', '考试中', '考试结束'],
      // 考试信息列表
      examineList: [],
      // 控制评分对话框的显示与隐藏
      setScoreDialogVisible: false,
      // 考试学生列表
      examineStudentList: [],
      examineId: 0

    }
  },

  created() {
    this.getExamineList()
  },
  methods: {
    // 获取考试列表
    getExamineList() {
      this.$http.get('/driver/examine/allotList').then(res => {
        if (res.data.code === 200) {
          this.examineList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 获取学员成绩
    score(id) {
      this.examineId = id
      this.$http.get('/driver/studentExamine/student', {
        params: {
          id: id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.examineStudentList = res.data.data
          this.setScoreDialogVisible = true
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 为学员评分
    setScore(student) {
      this.$prompt(
        '请输入考生的考试成绩：',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '输入不能为空',
          inputValidator: (value) => {
            const regPassword = /^(\d{1,2}|100)$/
            if (!regPassword.test(value)) {
              return '考试成绩只能在0~100之间';
            }
          }
        }).then(({value}) => {
        this.$confirm('该考生成绩为' + value + '分，请确认成绩输入正确，确认后无法修改！', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            studentId: student.id,
            examineId: this.examineId,
            grade: value,
            count: student.count
          }
          this.$http.post("/driver/studentExamine/setScore", params).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.score(this.examineId)
            } else {
              this.$message.error(res.data.message)
            }
          }).catch(err => {
            console.log(err)
            this.$message.error(err.message)
          })
        })
      })
    },
    // 为评分做说明
    setRemark(student) {
      this.$prompt(
        '请输入考生的考试成绩说明信息：',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
        const params = {
          studentId: student.id,
          examineId: this.examineId,
          remark: value
        }
        this.$http.post("/driver/studentExamine/setRemark", params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.score(this.examineId)
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error(err.message)
        })
      })
    }

  }
}
</script>

<style scoped>

</style>
